<template>
    <el-tabs class="content-panel pt-2">
        <el-tab-pane label="实时工况">
            <base-table :fields="dataFields" :dataSupplier="loadData" ref="tableRef" />
        </el-tab-pane>

        <el-tab-pane label="报警">
            <base-table :fields="alarmFields" :dataSupplier="loadAlarms" />
        </el-tab-pane>
    </el-tabs>
</template>
<script setup>
import https from "@/utils/https";
import { onMounted, onUnmounted } from "vue";

const props = defineProps({
    device: Object,
});
const dataFields = [
    { label: "上云时间", prop: "ts" },
    { label: "属性名称", prop: "paramName" },
    { label: "属性", prop: "paramCode" },
    { label: "属性值来源", prop: "type", converter: (val) => (val ? "规则计算" : "连接变量") },
    { label: "工况值", prop: "paramValue" },
    { label: "单位", prop: "unit" },
];
const alarmFields = [
    { label: "标题", prop: "title" },
    { label: "内容", prop: "content" },
    { label: "报警等级", prop: "level", width: "170px" },
    { label: "首次上报时间", prop: "createTime", width: "170px" },
    { label: "最后上报时间", prop: "lastUpTime", width: "170px" },
    { label: "报警次数", prop: "alarmCount", width: "170px" },
    { label: "报警状态", prop: "closed", converter: (val) => (val ? "关闭" : "打开"), width: "170px" },
    { label: "关闭时间", prop: "closeTime", width: "170px" },
];

let timer;
const tableRef = ref();

onMounted(() => {
    setTimeout(() => {
        timer = setInterval(() => {
            if (!tableRef.value) {
                clearInterval(timer);
                return;
            }
            tableRef.value.reload();
        }, 10000);
    }, 10000);
});

onUnmounted(() => {
    timer && clearInterval(timer);
});

function loadData(params) {
    params.deviceCode = props.device.code;
    return https.post("/device-data/page-query", params);
}

function loadAlarms(params) {
    params.deviceCode = props.device.code;
    return https.post("/manager/alarm/page-query", params);
}
</script>

<style lang="scss" scoped></style>
